import React, { Component } from 'react'

class List extends Component {
    render() {
        return (
            this.props.list.map((item,index)=>{
                const isSelect = item.isSelect;
                return(
                    <li key={index} className="list-item" style={{background:isSelect?"#fe7345":"rgb(242,242,242)"}}>
                        <div>
                            <button className='list-checkbox-btn'>
                                <div 
                                    className='list-checkbox' 
                                    onClick={()=>this.props.changeIsSelect(item.id)}
                                    style={{border:isSelect?"none":"2px solid #494a4b",padding:isSelect?"0px":"5px"}}
                                >
                                <span  
                                    style={{display:isSelect?"inline-block":"none"}}
                                >
                                    ✔
                                </span>
                                </div>
                            </button>
                            <span style={{color:isSelect?"white":"black",textDecoration:isSelect?"line-through":"none"}}>{item.content}</span>
                        </div>
                        <button 
                            className='list-delbtn'
                            onClick={()=>this.props.deleteContent(item.id)}
                            style={{color:isSelect?"white":"black"}}
                        >
                            ✖
                        </button>
                    </li>
                )
            })
        )
    }
}

export default List